<template>
  <div>
    <component :is="dashboard" ref="component" :data="data" @skipWindow="skipWindow">
      <slot></slot>
    
    </component>
  <el-button  type="text" class=" mr-20" @click="toCode">查看代码</el-button>
    <el-drawer
        title="部分代码"
        :visible.sync="codeShow"
        size='70%'
        >
        <codeDetail />
      </el-drawer>
  </div>
</template>
<script>
import codeDetail from './codeDetail.vue'
export default {
  name: 'dynamic-link',
  props: ['code','data'],
  components: {
    
    codeDetail
  },
  data () {
    return {
      codeShow: false,
      dashboard: null,
    }
  },
  watch: {
    code (val) {
        this.init(val)
    },
  },
  mounted () {
      this.init(this.code)
  },
  methods: {
    toCode(){
      debugger
        this.codeShow=true
      },
    init (val) {
      debugger
        try {
            this.dashboard = resolve => require(['@/'+ val + '.vue'], resolve)
        }catch (e) {
          let a =1
        }
    },
    skipWindow (value1,value2) {
      this.$emit('handleCode', value1,value2)
    }
  }
}
</script>
